From f8e97a33475fcd9ae0aceebc2b8693215ff38849 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 20 Apr 2024 23:34:31 -0700
Subject: feat(user): hololive badges pinned tooltip

---
 src/routes/user/[user]/+page.svelte | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/routes/user/[user]')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 850bdb26..deabb6c6 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -19,6 +19,7 @@
 	import type { UserPreferences } from '$lib/Database/userPreferences.js';
 	import SvelteMarkdown from 'svelte-markdown';
 	import MarkdownLink from '$lib/MarkdownLink.svelte';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 
 	export let data;
 
@@ -179,15 +180,22 @@
 
 		<div class="card">
 			<div class="hololive-badges">
-				{#each preferences.pinned_hololive_streams as stream}
+				{#each preferences.pinned_hololive_streams as stream, index}
 					{@const avatar = schedule.dict[stream]}
 
 					{#if avatar}
-						<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
-							<div class="user-grid-hololive-badges" title={stream} use:tooltip>
-								<ParallaxImage source={avatar} alternativeText="Avatar" />
-							</div>
-						</a>
+						<LinkedTooltip
+							content={stream}
+							id={`hololive-badge-${index}`}
+							pin={`hololive-badge-${index}`}
+							relative
+						>
+							<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
+								<div class="user-grid-hololive-badges">
+									<ParallaxImage source={avatar} alternativeText="Avatar" />
+								</div>
+							</a>
+						</LinkedTooltip>
 					{/if}
 				{/each}
 			</div>
-- 
cgit v1.2.3